<template>
  <div class="cjui-page-layout">
    <slot name="searchBefore"></slot>

    <!-- 搜索区 -->
    <div v-if="$slots.search" class="cjui-page-layout__search">
      <slot name="search"></slot>
    </div>

    <slot name="btnsBefore"></slot>

    <!-- 操作按钮区 -->
    <div v-if="$slots.btns" class="cjui-page-layout__btns">
      <slot name="btns"></slot>
    </div>

    <!-- 内容区 -->
    <div ref="pageContentRef" class="cjui-page-layout__content">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "CjuiPageLayout",
})
</script>

<style lang="scss">
.cjui-page-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cjui-page-layout__search {
  margin-bottom: var(--sys-body-content-el-margin);
}

.cjui-page-layout__btns {
  margin-bottom: var(--sys-body-content-el-margin);
}

.cjui-page-layout__content {
  flex: 1;
  overflow: auto;
}
</style>
